import React, { Component } from "react";

export default class App extends Component {
  /*
    初始化挂载阶段：
      constructor
      static getDerivedStateFromProps
      render
      componentDidMount -> 发送请求、设置定时器、绑定事件等

    更新阶段：
      static getDerivedStateFromProps
      shouldComponentUpdate -> 性能优化：返回true重新渲染，返回false不会重新渲染
      render
      getSnapshotBeforeUpdate
      componentDidUpdate

    卸载阶段：
      componentWillUnmount -> 清除定时器等
  */
  // 定义状态数据
  state = {
    count: 0,
  };

  constructor() {
    super();
    console.log("constructor()");
  }

  static getDerivedStateFromProps() {
    console.log("static getDerivedStateFromProps()");
    return {};
  }

  componentDidMount() {
    console.log("componentDidMount()");
  }

  shouldComponentUpdate() {
    console.log("shouldComponentUpdate()");
    return false;
  }

  getSnapshotBeforeUpdate() {
    console.log("getSnapshotBeforeUpdate()");
    return null;
  }

  componentDidUpdate() {
    console.log("componentDidUpdate()");
  }

  render() {
    console.log("render()");
    return (
      <div
        onClick={() => {
          // 类组件更新数据的方法
          this.setState({ count: this.state.count + 1 });
        }}
      >
        App --- {this.state.count}
      </div>
    );
  }
}
